<template>
  <div class="centerFour">
    <div class="c-f-r">
      <div class="c-f-r-imgbox">
        <img src="@/assets/index/数据治理-底部.png" class="bigimg" alt="" />
        <div class="position-box">
          <div
            :class="['p-box-li', 'p-box-li' + (index + 1)]"
            v-for="(item, index) in imgList"
            :key="index"
            @mouseover="changeIndex(index)"
            @mouseout="changeIndexBack(index)"
            @click="link(item.url)"
          >
            <img :src="item.tp" alt="" v-show="!item.show" />
            <img :src="item.tp1" alt="" class="hoverImg" v-show="item.show" />
            <div :class="['box-li-text', item.show ? 'active' : '']">
              {{ item.name }}
            </div>
          </div>
          <div class="p-box-textbox">
            <div class="p-box-text1">{{ showName }}</div>
            <div class="p-box-text2">{{ showValue * 1 }} 条</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'SdssDatagovernanceFrontendCenterFour',

  data() {
    return {
      showValue: '8124531',
      showName: '数据治理',
      imgList: [
        {
          tp: require('@/assets/index/数据质检-图标.png'),
          tp1: require('@/assets/index/数据质检-圆形.png'),
          name: '数据质检',
          value: 1512112,
          show: false,
          url: '质量'
        },
        {
          tp: require('@/assets/index/数据清洗-图标.png'),
          tp1: require('@/assets/index/数据清洗-圆形.png'),
          name: '数据清洗',
          value: 154358,
          show: false,
          url: ''
        },
        {
          tp: require('@/assets/index/数据汇聚-图标.png'),
          tp1: require('@/assets/index/数据汇聚-圆行.png'),
          name: '数据汇聚',
          value: 486512,
          show: false,
          url: '集成'
        },
        {
          tp: require('@/assets/index/数据开发-图标.png'),
          tp1: require('@/assets/index/数据开发-圆形.png'),
          name: '数据开发',
          value: 751524,
          show: false,
          url: ''
        },
        {
          tp: require('@/assets/index/数据治理-方形.png'),
          tp1: require('@/assets/index/数据治理-图标.png'),
          name: '数据治理',
          value: 8124531,
          show: false,
          url: '处理'
        }
      ]
    }
  },
  created() {},
  mounted() {},

  methods: {
    link(name) {
      if (name == '质量') {
        this.$router.push('/rules')
      } else if (name == '集成') {
        this.$router.push('/dataextraction')
      } else if (name == '处理') {
        this.$router.push('/datagovernance')
      }
    },
    changeIndex(e) {
      this.imgList[e].show = !this.imgList[e].show
      this.showName = this.imgList[e].name
      this.showValue = this.imgList[e].value * 1
    },
    changeIndexBack(e) {
      this.imgList[e].show = !this.imgList[e].show
    }
  }
}
</script>

<style lang="scss" scoped>
.centerFour {
  width: 50%;
  height: 100%;
  // background-color: purple;
}
.c-f-r {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 0.2604vw;
  box-sizing: border-box;
  box-shadow: 0px 0.2083vw 0.8333vw 13.0208vw rgba(2, 54, 68, 0.8) inset;
}
.c-f-r-imgbox {
  cursor: pointer;
  width: 17.1875vw;
  height: 26.5vh;
  margin: auto;
  position: relative;
}
.bigimg {
  width: 17.1875vw;
  height: 21.2963vh;
}

.position-box {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}
.p-box-li1 {
  position: absolute;
  top: -13%;
  left: 13%;
}

.p-box-li2 {
  position: absolute;
  top: -13%;
  right: 13%;
}
.p-box-li3 {
  position: absolute;
  top: 38%;
  left: -10%;
}

.p-box-li4 {
  position: absolute;
  top: 38%;
  right: -10%;
}

.p-box-li5 {
  position: absolute;
  bottom: -8%;
  right: 40%;
}
.p-box-li img {
  display: block;
  margin: auto;
  width: 2.3958vw;
  height: 5.463vh;
}

.p-box-li .hoverImg {
  width: 3.0208vw;
  height: 5.463vh;
}

.box-li-text {
  margin-top: 0.463vh;
  border: 1px solid #00bdbd;
  border-radius: 4px;
  color: #fff;
  border-radius: 0.2604vw;
  font-size: 0.7292vw;
  padding: 0.7407vh 0.4167vw;
}
.active {
  border: 1px solid #00bdbd;
  border-radius: 0.2083vw;
  background: #00bdbd;
}

.p-box-textbox {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -60%);
}

.p-box-text1 {
  font-weight: 500;
  width: 100%;
  text-align: center;
  font-size: 0.9375vw;
  color: #ffffff;
}

.p-box-text2 {
  width: 100%;
  text-align: center;
  font-size: 1.0417vw;
  color: #ffffff;
  font-weight: 600;
  margin-top: 0.7407vh;
}
</style>
